<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>申请提现</title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
		<!-- 引入 Bootstrap -->
			<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
			<link href="${pageContext.request.contextPath }/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
		<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
		<!-- 包括所有已编译的插件 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/foundation-datepicker.min.js"></script>
		<script src="${pageContext.request.contextPath }/js/locales/foundation-datepicker.zh-CN.js"></script>
    </head>
	
	<style>
		#txdiv{
			width:670px;
			margin:200px auto;
		}
	</style>
	
	<body>
		<div id="txdiv">
			<h4> <span class=""></span> 电子银行 &gt; 申请提现 </h4>
			<hr/>
			
			<form class="form form-horizontal" id='tx' action="#" method="post">
				<div class="row form-group">
					<label class="control-label col-xs-2">余额 : </label>
					<div class="col-xs-6">
						<input name="balance" type="hidden" value="1800.00" />
						<label class="control-label">1800.00</label>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">提现金额 : </label>
					<div class="col-xs-6">
						<input class="form-control time" name="monkey" required maxlength="30">
					</div>
					<div class="col-xs-4">
						<p id='tipmonkey' class="form-control-static hide text-danger">提现金额不能大于余额</p>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">银行地址 : </label>
					<div class="col-xs-6">
						<input class="form-control" name="addr" required maxlength="50">
					</div>
					<div class="col-xs-4">
						<p id='tipaddr' class="form-control-static hide text-danger">银行地址不能为空</p>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">银行名称 : </label>
					<div class="col-xs-6">
						<select class="form-control" name="bankname">
							<option value="-1" >--请选择--</option>
							<option value="1" >中国农业银行</option>
							<option value="2" >中国工商银行</option>
						</select>
					</div>
					<div class="col-xs-4">
						<p id='tipbankname' class="form-control-static hide text-danger">银行名称必须选择有效名称!</p>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">银行开户名 : </label>
					<div class="col-xs-6">
						<input class="form-control" name="cardname" required maxlength="5">
					</div>
					<div class="col-xs-4">
						<p id='tipcardname' class="form-control-static hide text-danger">银行开户名不能为空</p>
					</div>
				</div>
				<div class="row form-group">
					<label class="control-label col-xs-2">银行卡号 : </label>
					<div class="col-xs-6">
						<input class="form-control" name="cardno" required maxlength="19">
					</div>
					<div class="col-xs-4">
						<p id='tipcardno' class="form-control-static hide text-danger">银行卡号不能为空且必须为19位</p>
					</div>
				</div>
				<div class="row form-group pull-right">
					<button type="button" class="btn btn-success" onclick="show()">提交申请</button>
				</div>
				
			</form>
			
		</div>
		
		<div class="modal fade" id="txinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">确认信息</h4>
					</div>
					<div class="modal-body">
						<div class="row">
							<label class="col-xs-2">提现金额 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='monkey'>1200.00</span>
							</div>
						</div>
						<div class="row">
							<label class="control-label col-xs-2">银行地址 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='addr'>湖南长沙开服湘江中路20号中国农业银行支行</span>
							</div>
						</div>
						<div class="row">
							<label class="control-label col-xs-2">银行名称 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='bankname'>中国农业银行</span>
							</div>
						</div>
						<div class="row">
							<label class="control-label col-xs-2">开户名 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='cardname'>温泉</span>
							</div>
						</div>
						<div class="row">
							<label class="control-label col-xs-2">银行卡号 : </label>
							<div class="col-xs-6">
								<span class="form-control-static" id='cardno'>6217002120001377221</span>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="submitTx()">确定</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
	</body>
	
	<script>
		//往模态框中的信息对应的id显示对应的信息
		function setValue(id,value){
			$("#"+id).text(value);
		}
		
		//获取表单数据,并校验是否为空
		function getValByName(name){
			return $("#tx").find('input[name='+name+']').val();
		}
		
		//封装获取表单数据和赋给 模态框中的过程
		function changeTextByVal(id){
			var idval=getValByName(id);
			setValue(id,idval);
		}
		
		//将所有表单数据填入 模态框 并校验余额,弹出模态框
		function show(){
			$("#tx").find("div div p").addClass("hide")
		
			var monkey=getValByName('monkey');
			var balance=parseFloat(getValByName('balance'));
			
			var monkey=getValByName('monkey');
			var addr=getValByName('addr');
			var cardname=getValByName('cardname')
			var cardno=getValByName('cardno')
			var bankname=$("[name=bankname]").val();

			var flag=true;
			if(monkey.trim()==''){
				$("#tipmonkey").text("提现金额不能为空");
				$("#tipmonkey").removeClass('hide');
				flag=false;
			}else{
				if(parseFloat(monkey)>balance){
					$("#tipmonkey").text("提现金额不能大于余额");
					$("#tipmonkey").removeClass('hide');
					flag=false;
				}
			}
			if(addr.trim()==''){
				$("#tipaddr").removeClass('hide');
				flag=false;
			}
			if(bankname.trim()=='-1'){
				$("#tipbankname").removeClass('hide');
				flag=false;
			}
			if(cardname.trim()==''){
				$("#tipcardname").removeClass('hide');
				flag=false;
			}
			if(cardno.trim()==''||cardno.length!=19){
				$("#tipcardno").removeClass('hide');
				flag=false;
			}
			if(flag){
				bankname=$("[name=bankname]").find("option[value="+bankname+"]").text();
				setValue('bankname',bankname);
				setValue('monkey',monkey)
				setValue('cardname',cardname)
				setValue('cardno',cardno)
				setValue('addr',addr)
				$('#txinfo').modal('show');
			}
			
		}
		
		//提交申请表单
		function submitTx(){
			$('#txinfo').modal('hide');
			$("#tx").submit();
		}
		
		//为模态框添加 按键 Esc 关闭功能
		$('#txinfo,#warninfo').modal({
			keyboard: true
		})
		
		//初始化隐藏
		$("#txinfo,#warninfo").modal('hide')
	
	</script>
	
</html>